style: align Clerk auth UI to Figma brand designs#13
Conversation
Dependencies: - Update next 16.0.8 → 16.0.10 (fixes RSC source code exposure) - Update react and react-dom 19.2.1 → 19.2.3 - Update lucide-react 0.556.0 → 0.561.0 - Update clerk, tailwindcss and transitive dependencies Config: - Allow any ordered list style in markdownlint (MD029) Addresses Vercel security alert for CVE-2025-55183 (source code exposure) and CVE-2025-55184/CVE-2025-67779 (denial of service) in React Server Components. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Fonts: - Replace Geist fonts with Inter, Space Grotesk, JetBrains Mono from app/fonts.ts - Apply font CSS variables to <html> element for global availability - Set Inter as explicit font family in ClerkProvider appearance Rules: - Add Clerk authentication section to CLAUDE.md - Correct proxy.ts breaking change note (still uses clerkMiddleware function) Documentation: - Add Clerk auth flows reference image (sign-in, sign-up, account management) The fonts defined in app/fonts.ts were never imported in layout.tsx, causing CSS variables to be undefined and fonts to fall back to Times New Roman. Clerk components now use Inter consistently via the appearance.variables.fontFamily setting. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
CSS Variables: - Add --gradient-primary and --primary-gradient-to for centralised gradient definition - Update --card colour values for light (#F4F6F8) and dark (#0F1117) modes - Add @layer directive to control CSS cascade order with Clerk Clerk Provider: - Add cssLayerName: "clerk" for Tailwind v4 compatibility - Apply gradient to formButtonPrimary via elements prop Button Component: - Add "gradient" variant referencing --gradient-primary CSS variable Enables consistent gradient styling across Clerk auth components and app buttons from a single source of truth. The @layer ordering ensures Tailwind utilities can override Clerk styles when needed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Sign-up Page: - Remove two-column grid layout with marketing feature list - Centre the Clerk SignUp component on all screen sizes - Remove unused Lucide icon imports Aligns sign-up page with simpler visual approach, removing promotional content that is more suited to dedicated landing pages. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Rename setup-clerk-secrets.md to secrets-reference.md - Add quick reference commands table for Local/Vercel/GitHub - Document all env vars by platform with current values - Add Clerk route variables (sign-in/sign-up URLs, fallback redirects) - Restructure with tables for readability Reflects actual configured state across .env.local, Vercel, and GitHub Secrets. Adds newly configured Clerk routing variables from auth fix. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Auth Components: - Add ClerkSignIn wrapper with theme-aware logo via useTheme() - Add ClerkSignUp wrapper with static icon logo - Remove unnecessary await connection() from auth pages ClerkProvider: - Add localisation for sign-in/sign-up titles and subtitles - Simplify OAuth button text to provider name only - Configure cssLayerName for Tailwind v4 cascade Navbar: - Replace text wordmark with responsive SVG logo system - Mobile shows icon only; desktop shows full themed logo - Use --logo-full-themed CSS variable for dark/light switching Theming: - Add --logo-full-themed variable to :root and .dark selectors - Move @layer declaration before imports for correct cascade Branded auth forms with theme-aware logos and consistent localisation. Navbar logo now adapts to viewport and theme. Removes dynamic rendering overhead from auth pages since Clerk components are client-side. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Secrets Reference: - Add Value column with actual env var values for easy copy-paste - Add Sensitive? column clarifying only CLERK_SECRET_KEY needs encryption - Extend route variables to include Development environment for consistency - Add note explaining NEXT_PUBLIC_* variables are browser-exposed by design Helps distinguish true secrets from public configuration when setting up Vercel dashboard. Non-sensitive variables can use plain text for easier auditing. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Auth Pages: - Add `await connection()` to sign-in and sign-up pages - Convert page components to async functions Clerk components require browser APIs and cannot be statically prerendered with Next.js 16's cacheComponents enabled. Using `connection()` forces dynamic rendering at request time, which is the recommended approach per Next.js docs. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary by CodeRabbitRelease Notes
✏️ Tip: You can customize this high-level summary in your review settings. WalkthroughThis PR implements Clerk authentication UI customisation with theme-aware branding, introducing custom sign-in and sign-up components, centralised CSS variables for theming, font migration from Geist to local fonts, and comprehensive documentation updates covering authentication setup and environment configuration. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20–30 minutes Areas requiring extra attention:
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (2)
package-lock.jsonis excluded by!**/package-lock.jsonx_docs/figma/auth/flows.jpgis excluded by!**/*.jpg
📒 Files selected for processing (15)
.markdownlint.yaml(1 hunks)CLAUDE.md(2 hunks)app/(auth)/sign-in/[[...sign-in]]/page.tsx(1 hunks)app/(auth)/sign-up/[[...sign-up]]/page.tsx(1 hunks)app/globals.css(4 hunks)app/layout.tsx(2 hunks)components/auth/clerk-signin.tsx(1 hunks)components/auth/clerk-signup.tsx(1 hunks)components/clerk-provider.tsx(1 hunks)components/navigation/navbar/index.tsx(1 hunks)components/ui/button.tsx(1 hunks)package.json(1 hunks)x_docs/own/2024-12-14-eval-auth-ui-customise.md(1 hunks)x_docs/own/secrets-reference.md(1 hunks)x_docs/own/setup-clerk-secrets.md(0 hunks)
💤 Files with no reviewable changes (1)
- x_docs/own/setup-clerk-secrets.md
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Only add"use client"directive when interactivity is needed in React components
Avoid manualuseMemoanduseCallbackhooks unless profiling shows performance benefit
Files:
components/ui/button.tsxcomponents/auth/clerk-signup.tsxcomponents/auth/clerk-signin.tsxapp/layout.tsxapp/(auth)/sign-in/[[...sign-in]]/page.tsxapp/(auth)/sign-up/[[...sign-up]]/page.tsxcomponents/navigation/navbar/index.tsxcomponents/clerk-provider.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Always use
@/import aliases for all imports, including sibling imports (e.g.,@/app/fontsinstead of./fonts)
Files:
components/ui/button.tsxcomponents/auth/clerk-signup.tsxcomponents/auth/clerk-signin.tsxapp/layout.tsxapp/(auth)/sign-in/[[...sign-in]]/page.tsxapp/(auth)/sign-up/[[...sign-up]]/page.tsxcomponents/navigation/navbar/index.tsxcomponents/clerk-provider.tsx
**/*.{css,scss}
📄 CodeRabbit inference engine (CLAUDE.md)
In Tailwind CSS v4, use
@import "tailwindcss"syntax instead of@tailwinddirectives
Files:
app/globals.css
🧠 Learnings (8)
📓 Common learnings
Learnt from: michellepace
Repo: michellepace/devflow PR: 7
File: components/navigation/navbar/index.tsx:1-12
Timestamp: 2025-12-10T20:20:46.607Z
Learning: Clerk's Next.js components (SignedIn, SignedOut, SignInButton, SignUpButton, UserButton) exported from clerk/nextjs are designed to work in Server Components without requiring a "use client" directive in the consuming component, as they handle the client/server boundary internally with their own directives.
📚 Learning: 2025-12-10T20:20:46.607Z
Learnt from: michellepace
Repo: michellepace/devflow PR: 7
File: components/navigation/navbar/index.tsx:1-12
Timestamp: 2025-12-10T20:20:46.607Z
Learning: Clerk's Next.js components (SignedIn, SignedOut, SignInButton, SignUpButton, UserButton) from clerk/nextjs can be used inside Server Components without adding 'use client' in the consuming component. They manage client/server boundary internally. When reviewing code, prefer omitting 'use client' in server components that render these Clerk components and avoid introducing client directives solely for these components. This guideline helps maintain server/server boundary and reduce client bundle size.
Applied to files:
components/ui/button.tsxcomponents/auth/clerk-signup.tsxcomponents/auth/clerk-signin.tsxapp/layout.tsxapp/(auth)/sign-in/[[...sign-in]]/page.tsxapp/(auth)/sign-up/[[...sign-up]]/page.tsxcomponents/navigation/navbar/index.tsxcomponents/clerk-provider.tsx
📚 Learning: 2025-12-10T20:20:46.607Z
Learnt from: michellepace
Repo: michellepace/devflow PR: 7
File: components/navigation/navbar/index.tsx:1-12
Timestamp: 2025-12-10T20:20:46.607Z
Learning: Clerk's Next.js components (SignedIn, SignedOut, SignInButton, SignUpButton, UserButton) exported from clerk/nextjs are designed to work in Server Components without requiring a "use client" directive in the consuming component, as they handle the client/server boundary internally with their own directives.
Applied to files:
CLAUDE.mdx_docs/own/2024-12-14-eval-auth-ui-customise.mdapp/globals.css
📚 Learning: 2025-12-10T23:16:38.721Z
Learnt from: CR
Repo: michellepace/devflow PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-10T23:16:38.721Z
Learning: Applies to proxy.ts : In Next.js 16, use `proxy.ts` instead of `middleware.ts` and export `proxy()` function instead of `middleware()`
Applied to files:
CLAUDE.md
📚 Learning: 2025-12-10T23:16:38.721Z
Learnt from: CR
Repo: michellepace/devflow PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-10T23:16:38.721Z
Learning: Use Lefthook for Git hooks with pre-commit checks (lint, typecheck, unit tests) and pre-push checks (E2E tests)
Applied to files:
CLAUDE.md
📚 Learning: 2025-12-10T23:16:38.721Z
Learnt from: CR
Repo: michellepace/devflow PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-10T23:16:38.721Z
Learning: Use Biome for linting and formatting instead of ESLint and Prettier
Applied to files:
CLAUDE.md
📚 Learning: 2025-12-10T23:16:38.721Z
Learnt from: CR
Repo: michellepace/devflow PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-10T23:16:38.721Z
Learning: Applies to **/*.{css,scss} : In Tailwind CSS v4, use `import "tailwindcss"` syntax instead of `tailwind` directives
Applied to files:
CLAUDE.mdapp/globals.css
📚 Learning: 2025-12-10T23:16:38.721Z
Learnt from: CR
Repo: michellepace/devflow PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-10T23:16:38.721Z
Learning: Applies to app/**/\[*\]/**/*.{ts,tsx} : In Next.js 16 dynamic routes, handle `params` as a Promise and use await: `{ params }: { params: Promise<{ id: string }> }`
Applied to files:
CLAUDE.md
🧬 Code graph analysis (3)
app/layout.tsx (1)
app/fonts.ts (3)
inter(11-15)spaceGrotesk(4-8)jetbrainsMono(18-22)
app/(auth)/sign-in/[[...sign-in]]/page.tsx (1)
components/auth/clerk-signin.tsx (1)
ClerkSignIn(6-26)
app/(auth)/sign-up/[[...sign-up]]/page.tsx (1)
components/auth/clerk-signup.tsx (1)
ClerkSignUp(3-13)
🪛 LanguageTool
x_docs/own/secrets-reference.md
[uncategorized] ~69-~69: Possible missing article found.
Context: ...your custom sign-in page. Without this, Clerk redirects to Account Portal. | | `NEXT_...
(AI_HYDRA_LEO_MISSING_THE)
[uncategorized] ~70-~70: Possible missing article found.
Context: ...your custom sign-up page. Without this, Clerk redirects to Account Portal. | | `NEXT_...
(AI_HYDRA_LEO_MISSING_THE)
x_docs/own/2024-12-14-eval-auth-ui-customise.md
[style] ~11-~11: Would you like to use the Oxford spelling “localized”? The spelling ‘localised’ is also correct.
Context: ...sive logos, theme-aware components, and localised Clerk authentication forms. The impleme...
(OXFORD_SPELLING_Z_NOT_S)
[uncategorized] ~41-~41: Possible missing comma found.
Context: ...t—mobile users see a clean, uncluttered header whilst desktop users get full brand vis...
(AI_HYDRA_LEO_MISSING_COMMA)
[style] ~112-~112: Would you like to use the Oxford spelling “centralized”? The spelling ‘centralised’ is also correct.
Context: ...hemedvariable inglobals.css` is the centralised source for themed logos across the app....
(OXFORD_SPELLING_Z_NOT_S)
[uncategorized] ~112-~112: A comma may be missing after the conjunctive/linking adverb ‘Currently’.
Context: ...source for themed logos across the app. Currently only the navbar uses it, but this is fo...
(SENT_START_CONJUNCTIVE_LINKING_ADVERB_COMMA)
[grammar] ~114-~114: Uncountable nouns are usually not used with an indefinite article. Use simply “necessary accommodation”.
Context: ... string). This isn't duplication — it's a necessary accommodation. The CSS variable remains the canonical...
(A_UNCOUNTABLE)
[style] ~152-~152: Would you like to use the Oxford spelling “customize”? The spelling ‘customise’ is also correct.
Context: ...lerk's experimental localization API to customise text. The {{provider|titleize}} templ...
(OXFORD_SPELLING_Z_NOT_S)
[uncategorized] ~193-~193: Possible missing comma found.
Context: ...The sign-up page uses Clerk's default text whilst sign-in has custom branding. ...
(AI_HYDRA_LEO_MISSING_COMMA)
[style] ~197-~197: Would you like to use the Oxford spelling “Utilized”? The spelling ‘Utilised’ is also correct.
Context: ... #### 4. CSS Variable Defined But Not Utilised in Clerk Components (Not an issue) ...
(OXFORD_SPELLING_Z_NOT_S)
[grammar] ~229-~229: When ‘sign in’ is used as a verb, it does not need to be hyphenated.
Context: ... Recommendations ### Priority 1: Add Sign-up Localization (Implemented) Added s...
(SIGN_IN)
[style] ~245-~245: Would you like to use the Oxford spelling “Centralize”? The spelling ‘Centralise’ is also correct.
Context: ..., }, }, }} ``` ### Priority 2: Centralise Logo Paths (Not needed) ~~The logo...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~249-~249: Would you like to use the Oxford spelling “centralizing”? The spelling ‘centralising’ is also correct.
Context: ...rence.~~ Resolution: After review, centralising logo paths provides minimal benefit: 1...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~281-~281: Would you like to use the Oxford spelling “centralized”? The spelling ‘centralised’ is also correct.
Context: ...ience. --- ### Q2: Did he follow good centralised theming practice with Tailwind 4.1? **...
(OXFORD_SPELLING_Z_NOT_S)
[grammar] ~294-~294: Uncountable nouns are usually not used with an indefinite article. Use simply “reasonable accommodation”.
Context: ...ariable for non-Clerk, JS for Clerk) is a reasonable accommodation for Clerk's API limitation, not a flaw....
(A_UNCOUNTABLE)
[style] ~317-~317: Would you like to use the Oxford spelling “customization”? The spelling ‘customisation’ is also correct.
Context: ...onstrates good familiarity with Clerk's customisation APIs and proper Tailwind v4 configurati...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~329-~329: Would you like to use the Oxford spelling “Centralize”? The spelling ‘Centralise’ is also correct.
Context: ... DevFlow" Nice to have: 2. 🟢 Centralise logo paths (Not needed) — CSS can...
(OXFORD_SPELLING_Z_NOT_S)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Run E2E Tests
🔇 Additional comments (15)
.markdownlint.yaml (1)
11-11: Configuration change aligns with documentation updates.The addition of the MD029 disable rule follows the established pattern and supports the PR's documentation updates (CLAUDE.md) by allowing flexible ordered list formatting.
x_docs/own/secrets-reference.md (1)
1-140: Comprehensive environment and testing documentation well-structured for the PR.The file provides clear, platform-specific guidance for managing Clerk authentication secrets and E2E test credentials across local, staging (Vercel), and CI (GitHub) environments. The structure follows a logical progression from quick reference through detailed variable descriptions to practical E2E testing setup and troubleshooting.
The content aligns well with the PR's introduction of Clerk-based authentication UI and the test infrastructure required for E2E validation of sign-in and sign-up flows. Clear tables, command examples, and troubleshooting guidance should help developers quickly configure their environments and debug issues.
Once the two issues flagged above are resolved (sanitised example key and grammar fixes), this document will serve as a solid successor to the removed setup guide.
package.json (1)
32-36: Dependency bumps: verify peer-deps + lockfile consistency (Next 16 / React 19 / Clerk).Given the upgrade touches the core runtime (
next,react,react-dom) plus UI icons, please ensure:
- the lockfile (
package-lock.json/pnpm-lock.yaml/yarn.lock) is updated in the PR and CI uses a clean install (no hidden transitive drift),- no peer-dependency warnings/errors (especially around
@clerk/nextjs,next-themes, testing stack) after the bump,- a clean build + E2E run succeeds from scratch (not just incremental node_modules).
# locally (or in CI) after a clean checkout: rm -rf node_modules npm ci npm ls next react react-dom @clerk/nextjs lucide-react npm run build npm run test:e2e@clerk/nextjs 6.36.1 peer dependency / compatibility with Next.js 16.0.10 and React 19.2.3components/auth/clerk-signup.tsx (1)
1-13: Looks good; keep logo asset naming consistent across Sign In/Up.
This stays server-friendly (no"use client"), which aligns with the Clerk boundary handling noted in learnings. Consider confirming the intended difference between/images/site-logo.svghere vs the themed assets used on sign-in.components/ui/button.tsx (1)
22-23:gradientvariant is fine; please confirm Tailwind v4 arbitrary property support in this repo.
Thebg-[image:var(--gradient-primary)]approach is clean, but it’s dependent on Tailwind’s arbitrary property parsing and the variable being present on the page.app/(auth)/sign-up/[[...sign-up]]/page.tsx (1)
1-11: Centred auth page is fine; re-check thatawait connection()is the right long-term opt-out.
Ifconnection()is being used purely to force dynamic rendering/build behaviour, it’s worth confirming this remains the preferred Next.js 16 pattern for your caching/build issue (vs route-leveldynamic/revalidateexports).app/(auth)/sign-in/[[...sign-in]]/page.tsx (1)
1-11: Clean swap to<ClerkSignIn />; sameconnection()caveat as sign-up.
Implementation is straightforward; just confirmawait connection()is the desired Next.js 16 workaround for this route over route-leveldynamic/revalidate.components/navigation/navbar/index.tsx (1)
18-33: Verify Tailwind classbg-(image:--logo-full-themed)compiles and check consistency with the rest of the codebase.The parenthesis syntax
bg-(image:--logo-full-themed)appears non-standard. Check yourtailwind.configto confirm this syntax is supported, or switch to the standard bracket formbg-[image:var(--logo-full-themed)]for alignment with Tailwind v4 conventions. Also verify if other parts of this PR use bracket-form arbitrary properties, as inconsistent syntax across the codebase may cause build issues.components/clerk-provider.tsx (2)
27-42: LGTM! Excellent localization implementation.The localization structure follows Clerk's experimental API correctly, with proper template syntax (
{{provider|titleize}}), consistent messaging across sign-in and sign-up flows, and the correct spread pattern that allows customization via props whilst providing sensible defaults.
21-22: Use consistent Tailwind v4 syntax for CSS custom properties.Both syntaxes are valid in Tailwind v4: square brackets with explicit
var()(bg-[image:var(--gradient-primary)]) and parentheses shorthand (bg-(image:--gradient-primary)). They produce identical output. Choose one approach and apply it consistently across the codebase.x_docs/own/2024-12-14-eval-auth-ui-customise.md (1)
1-333: Excellent documentation quality.This evaluation report provides comprehensive technical documentation of the auth UI changes, with accurate descriptions of the Tailwind v4 theming approach, Clerk integration patterns, and design decisions. The document properly explains the rationale for dual theming approaches (CSS variables for app components, JavaScript for Clerk's API constraints) and includes helpful before/after comparisons.
Note: The static analysis suggestions for "localized" vs "localised" are false positives, as British English spelling is correct for this codebase (en-GB).
app/globals.css (4)
1-1: LGTM! Correct Tailwind v4 layer configuration.The
@layerdirective is correctly positioned before the@import "tailwindcss"statement, which is required in Tailwind v4. The inclusion of the "clerk" layer enables Tailwind utilities to cleanly override Clerk's default styles without requiring!importantoverrides, as referenced bycssLayerName: "clerk"in the ClerkProvider.Based on learnings, this follows Tailwind CSS v4 best practices.
90-95: LGTM! Well-structured gradient implementation.The gradient variable correctly uses
linear-gradientsyntax with CSS variable references for colour values, ensuring theme consistency. The extended colour stops (-13.95% and 99.54%) create a smooth gradient appearance that extends beyond element boundaries, which is a good design practice for gradient buttons.
97-98: LGTM! Excellent centralised theming approach.The
--logo-full-themedvariable establishes a single source of truth for theme-aware logo paths, automatically switching between light and dark variants based on the.darkclass. This centralised approach makes it easy for future components (headers, footers, email templates) to reference consistent branding without duplicating theme logic.Note: As documented in the evaluation report, Clerk components require a parallel JavaScript approach due to API limitations (
logoImageUrlaccepts only static URL strings), which is a necessary accommodation rather than a flaw.Also applies to: 135-136
61-61: LGTM! Appropriate card colour adjustments for auth UI.The updated
--cardcolours provide suitable backgrounds for the authentication forms, using the oklch() colour space for better perceptual uniformity. The light variant (#F4F6F8) is a subtle grey-blue that maintains readability, whilst the dark variant (#0F1117) provides good contrast for dark mode users.Also applies to: 105-105
| | `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` | `pk_test_YXdha2Utb3dsLTYzLmNsZXJrLmFjY291bnRzLmRldiQ` | Yes | Yes | Yes | No | | ||
| | `CLERK_PUBLISHABLE_KEY` | `pk_test_YXdha2Utb3dsLTYzLmNsZXJrLmFjY291bnRzLmRldiQ` | Yes | Yes | Yes | No | |
There was a problem hiding this comment.
Sanitise or replace the example Clerk publishable key in the Vercel table.
The Vercel section contains what appears to be a real (though test-mode) Clerk publishable key: pk_test_YXdha2Utb3dsLTYzLmNsZXJrLmFjY291bnRzLmRldiQ. Even though publishable keys are intentionally browser-exposed by design, including a specific key value in documentation can:
- Enable attackers to enumerate or target this specific Clerk instance
- Create confusion about whether this is a real production key or a placeholder
Replace with a clearly generic example like pk_test_... to match the pattern used in lines 19-20.
-| `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` | `pk_test_YXdha2Utb3dsLTYzLmNsZXJrLmFjY291bnRzLmRldiQ` | Yes | Yes | Yes | No |
+| `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` | `pk_test_...` | Yes | Yes | Yes | No |-| `CLERK_PUBLISHABLE_KEY` | `pk_test_YXdha2Utb3dsLTYzLmNsZXJrLmFjY291bnRzLmRldiQ` | Yes | Yes | Yes | No |
+| `CLERK_PUBLISHABLE_KEY` | `pk_test_...` | Yes | Yes | Yes | No |📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| | `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` | `pk_test_YXdha2Utb3dsLTYzLmNsZXJrLmFjY291bnRzLmRldiQ` | Yes | Yes | Yes | No | | |
| | `CLERK_PUBLISHABLE_KEY` | `pk_test_YXdha2Utb3dsLTYzLmNsZXJrLmFjY291bnRzLmRldiQ` | Yes | Yes | Yes | No | | |
| | `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` | `pk_test_...` | Yes | Yes | Yes | No | | |
| | `CLERK_PUBLISHABLE_KEY` | `pk_test_...` | Yes | Yes | Yes | No | |
🤖 Prompt for AI Agents
In x_docs/own/secrets-reference.md around lines 35 to 36, the Vercel table
contains a concrete-looking Clerk publishable key; replace the specific key
value `pk_test_YXdha2Utb3dsLTYzLmNsZXJrLmFjY291bnRzLmRldiQ` with a clearly
generic placeholder (e.g. `pk_test_...`) to avoid exposing an example key and
match the placeholder pattern used earlier in the file (lines ~19-20); update
both occurrences in the table and verify the table formatting remains intact.
There was a problem hiding this comment.
@coderabbitai - will be resolved next pushed commit.
There was a problem hiding this comment.
@michellepace, thank you for confirming! I'll look forward to seeing that change in the next commit.
Corrects "PlayWright" to "Playwright" to match official branding. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Local section: - Add actual publishable key values to match Vercel section - Redact test password with placeholder Clerk Routes: - Add missing article before "Account Portal" Aligns Local and Vercel sections for easier copy-paste. Grammar fix follows British English conventions per project rules. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Dependencies: - @types/node 24.10.2 → 25.0.2 - vite-tsconfig-paths 5.1.4 → 6.0.0 Both are stable releases. All checks pass with no code changes required. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 participant
Summary
Customises Clerk's pre-built authentication UI to match our brand guidelines, within the constraints of what Clerk allows.
Auth component changes
ClerkSignIn(components/auth/clerk-signin.tsx) — client component that swaps logo based on theme (light/dark) viauseTheme()ClerkSignUp(components/auth/clerk-signup.tsx) — simpler server-friendly component with static logoconnection()fromnext/serverto opt out of static caching, fixing build failures with Next.js 16's cacheComponents featureClerkProvider theming (
components/clerk-provider.tsx)@layer clerk)Design system additions
button.tsx—bg-[image:var(--gradient-primary)]globals.css:--gradient-primary(orange gradient matching Figma)--cardcolours adjusted for auth card backgrounds--logo-full-themedfor CSS-based logo themingFonts
Documentation
Updated
CLAUDE.mdwith auth architecture notes.Test plan
npm run build)🤖 Generated with Claude Code